import React from 'react';
import { connect } from 'dva';
import { NavBar, Button } from 'antd-mobile';
import styles from './CategoryPage.css';

class CategoryPage extends React.Component {

    componentDidMount() {

    }

    render() {

        console.log('render category');

        const { category: {
            showContent
        } } = this.props;
        return (
            <div>
                <NavBar
                    iconName={false}
                    mode="light"
                >
                    商品分类
                </NavBar>
                {showContent && this.renderContent()}
                <div style={{height: 100}}/>
            </div>
        );
    }

    renderContent() {

        const { category: {
            indexList,
            categoryList
        } } = this.props;

        return (
            <div className={styles.content}>
                <div className={styles.contentIndex}>
                    {indexList.map((data, index) => {
                        return (
                            <div className={styles.indexItem} key={index + 'index'} >
                                <div onClick={()=>{
                                    this.props.dispatch({
                                        type:'category/changeIndex',
                                        payload: index
                                    });
                                }}>{data.rootClassifyName}</div>
                            </div>
                        );
                    })}
                </div>
                <div className={styles.contentCategory}>
                    {categoryList.map((data, index) => {
                        return (
                            <div key={index + 'category'} className={styles.categoryItem} onClick={()=>{



                              this.props.dispatch({
                                type:'home/click',
                                payload: 'from category'
                              })
                            }}>
                                <img src={data.subIcon} className={styles.itemImage}/>
                                <p className={styles.itemText}>{data.subClassifyName}</p>
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }

}

const mapStateToProps = ({category}) => {
    return {category};
};

export default connect(mapStateToProps)(CategoryPage);
